{extend name="base" /}
{block name="css"}
<style>
    #dictTable + .layui-table-view .layui-table-tool-temp {
        padding-right: 0;
    }

    #dictTable + .layui-table-view .layui-table-body tbody > tr td {
        cursor: pointer;
    }

    #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click {
        background-color: #fff3e0;
    }

    #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click td:last-child > div:before {
        position: absolute;
        right: 6px;
        content: "\e602";
        font-size: 12px;
        font-style: normal;
        font-family: layui-icon !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

</style>
{/block}
{block name="body"}
<div class="layui-col-md3">
    <div class="layui-card" style="padding: 0px 10px 10px 10px;">
        <!-- 数据表格1 -->
        <table id="dictTable" lay-filter="dictTable"></table>
    </div>
</div>
<div class="layui-col-md9">
    <div class="layui-card" style="padding: 0px 10px 10px 10px;">
        <!-- 数据表格2 -->
        <table id="dictDataTable" lay-filter="dictDataTable"></table>
        <!-- 表格操作列 -->
        <script type="text/html" id="tableTBdict">
            <a href="{:url('store/dict/add')}?dict_id={{d.dictId}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="450px" data-height="100%">添加</a>
        </script>
        <!-- 表格操作列 -->
        <script type="text/html" id="tableTBTrack">
            {{# if(d.is_default =='0'){ }}
            <a href="{:url('store/dict/edit_default')}?id={{d.id}}" class="layui-btn layui-btn-sm layui-btn-primary ajax-action">设为默认</a>
            {{# }else{ }}
            <a class="layui-btn layui-btn-sm">默认参数</a>
            {{# } }}
            <a href="{:url('store/dict/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="420px" data-height="268px">修改</a>
            <a href="{:url('store/dict/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="sort_order">
            <input type="text" name="sort_order" value="{{d.sort_order}}" autocomplete="off" class="layui-input ajax-update" data-url="{:url('store/dict/edit')}?id={{d.id}}">
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="status">
            <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="启用|禁用" data-url="{:url('store/dict/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
        </script>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util','treeTable', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var treeTable = layui.treeTable;
        var selObj;  // 左表选中数据
        var newid = layui.data('newid');
        var leftid = newid.id ? newid.id : 0;
        /* 渲染表格 */
        var insTb = table.render({
            elem: '#dictTable',
            url: "{:url('store/dict/get_dictionary')}",
            height: 'full-70',
            defaultToolbar: [],
            cols: [[
                {type: 'numbers'},
                {field: 'dictName', title: '字典分类'},
                {templet: '#tableTBdict', title: '操作', align: 'center',width:100}
            ]],
            done: function (res, curr, count) {
                $('#dictTable+.layui-table-view .layui-table-body tbody>tr:eq('+ leftid +')').trigger('click');
            }
        }); 

        /* 监听行单击事件 */
        table.on('row(dictTable)', function (obj) {
            selObj = obj;
            layui.data('newid', {key: 'id',value:obj.data.leftid});
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            insTb2.reload({
                reqData: function (data, callback) {
                    $.get("{:url('store/dict/index_json')}?dict_id=" + obj.data.dictId, function (res) {
                        var data = $.parseJSON(res);
                        console.log(data)
                        callback(data.data);
                    });
                }
            });
        });
        
        /* 渲染表格2 */
        var insTb2 = treeTable.render({
            elem: '#dictDataTable',
            toolbar: 'default',
            cellMinWidth: 100,
            tree: {
                iconIndex: 1,  // 折叠图标显示在第几列
                idName: 'id',  // 自定义id字段的名称
                pidName: 'parentId',  // 自定义标识是否还有子节点的字段名称
                isPidData: true  // 是否是pid形式数据
            },
            cols: [
                {type: 'numbers'},
                {field: 'name', title: '名称'},
                {align: 'center', templet: function (d) {
                        if(d.image){
                            return '<img src="' + d.image + '" class="tdImg" tb-img/>';
                        }else{
                            return '';
                        }
                    }, title: '图片', width: 120, unresize: true
                },
                {field: 'remark', title: '描述'},
                {title: '排序号', align: 'center',templet:'#sort_order'},
                {align: 'center',title: '状态',templet:'#status'},
                {templet: '#tableTBTrack', title: '操作', align: 'center'}
            ],

        });

        /* 表格2头工具栏点击事件 */
        table.on('toolbar(dictDataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                var title = $(this).html();
                var index = layer.open({
                    title: title,
                    type: 2,
                    anim: 0,
                    shadeClose:true,
                    area: ['400px', '260px'],
                    content: "{:url('store/dict/add')}?dict_id=" + obj.config.where.dict_id,
                })
                return false;
            }
        });

    });
</script>
{/block}